<template>
  <div class="partnerList">
    <div class="partnerList_top">
      <div class="into_index">首页<i class="el-icon-close"></i></div>
      <div class="current">设计师列表<i class="el-icon-close"></i></div>
    </div>
    <div class="partnerList_bottom">
      <div class="partnerList_bottom_new">
        <div class="partnerList_bottom_new_goods">
          <div class="partnerList_bottom_new_goods_btn">
            <button @click="handerNewShop">
              <i class="el-icon-trophy"></i>新增设计师
            </button>
          </div>
          <div class="partnerList_bottom_new_goods_screening">
            卖场：
            <el-select
              v-model="marketId"
              clearable
              @change="selectMarket"
              filterable
              placeholder="请选择卖场"
            >
              <el-option
                v-for="item in marketList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
            <div class="partnerList_bottom_new_goods_screening_right">
              <el-input v-model="input" placeholder="请输入"></el-input>
              <button @click="handerSeach">
                <i class="el-icon-search"></i>搜索
              </button>
            </div>
          </div>
        </div>
      </div>
      <div class="partnerList_table">
        <div class="partnerList_bottom_table">
          <table>
            <tr>
              <th></th>
              <th>序号</th>
              <th class="avaImg">头像</th>
              <th>姓名</th>
              <th>店铺名称</th>
              <th>联系电话</th>
              <th>从事年限</th>
              <th>设计风格</th>
              <th>服务类型</th>
              <th>起始报价</th>
              <th>结尾报价</th>
              <th>创建时间</th>
              <th>所属卖场</th>
              <th>状态</th>
              <th>操作</th>
            </tr>
            <tr v-for="(v, i) in tableList" :key="i">
              <td>
                <font
                  class="checkbox"
                  :class="{ check_active: checkBoxAll.includes(i) }"
                  @click="handlerCheckbox(i)"
                  ><i class="el-icon-check"></i
                ></font>
              </td>
              <td>{{ v.id }}</td>
              <td class="avaImg">
                <div class="avatarImg" v-if="v.avatar != null">
                  <img :src="v.avatar.path" />
                </div>
              </td>
              <td>{{ v.name }}</td>
              <td>{{ v.title }}</td>
              <td>{{ v.phone }}</td>
              <td>{{ v.employ_year }}</td>
              <td>
                <div class="tag">
                  <el-tag
                    size="mini"
                    v-for="(item, index) in v.design_style"
                    :key="index"
                    >{{ item.name }}</el-tag
                  >
                </div>
              </td>
              <td>
                <div class="tag">
                  <el-tag
                    size="small"
                    v-for="(item, index) in v.service_type"
                    :key="index"
                    >{{ item.name }}</el-tag
                  >
                </div>
              </td>
              <td>{{ v.start_offer }}</td>
              <td>{{ v.end_offer }}</td>
              <td>
                <div v-if="v.create_time != null">
                  {{ $moment(v.create_time * 1000).format("YYYY-MM-DD") }}
                </div>
              </td>
              <td>{{v.market_name}}</td>
              <td>{{ v.status == 0 ? "禁用" : "正常" }}</td>
              <td>
                <button class="editor" @click="toDetail(v.id)">详情</button>
                <button
                  class="shelves"
                  :class="{ delete: v.status == 0 }"
                  @click="shelves(v.id, v.status)"
                >
                  {{ v.status == 0 ? "启用" : "禁用" }}
                </button>
                <button class="editor" @click="openComRate(v.id)">
                  佣金比例
                </button>
              </td>
            </tr>
            <tr v-if="tableList.length == 0">
              <td class="table_title" colspan="20">当前数据空空如也</td>
            </tr>
          </table>
        </div>

        <div class="partnerList_bottom_page">
          <div class="partnerList_bottom_page_left">
            <div
              class="partnerList_bottom_page_left_checkAll"
              @click="handerCheckAll"
            >
              <font class="checkbox" :class="{ check_active: checkAll }"
                ><i class="el-icon-check"></i
              ></font>
            </div>
            全选
            <!-- <button class="partnerList_bottom_page_left_btn" @click="selectDel">删除</button> -->
          </div>
          <div class="partnerList_bottom_page_right">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              background
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
    <!-- 佣金比例弹出框 -->
    <el-dialog
      title="佣金比例设置"
      @closed="closedFn"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <div class="comRateBox">
        <div class="rateTop">
          比例
          <el-input
            v-model="non_standard_order_rate"
            placeholder="请输入佣金比例"
          ></el-input
          >%
        </div>
        <p>（佣金比例范围为：{{ rate_min }}-{{ rate_max }}%）</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          :disabled="!non_standard_order_rate"
          @click="rateSubmit"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cateList: [],
      cate: {},
      input: "",
      checkAll: false,
      page: 1,
      pageSize: 10,
      total: 0,
      checkBoxAll: [], // 选中的数据
      shelvesAlls: [],
      tableList: [],
      dialogVisible: false,
      non_standard_order_rate: "", //佣金比例
      rate_max: "",
      rate_min: "",
      rate_id: "",
      marketId: "", //卖场id
      marketList: [],
    };
  },
  mounted() {
    this.getDesigList();
    this.remoteMethod();
  },

  methods: {
    // 获取卖场列表
    remoteMethod() {
      this.$http.post("/api/root/Market/marketList").then((res) => {
        console.log(res, "卖场列表");
        if (res.code == 1) {
          this.marketList = res.data ? res.data : [];
        }
      });
    },
    // 选择卖场
    selectMarket() {
      this.getDesigList();
    },

    // 佣金比例按钮
    openComRate(id) {
      this.dialogVisible = true;
      // 获取比例详情
      this.$http
        .post("/api/root/Base/getOrderRate", {
          partner_id: id,
          partner_type: "designer",
        })
        .then((res) => {
          console.log(res, "比例详情");
          if (res.code == 1) {
            (this.non_standard_order_rate = res.data.non_standard_order_rate),
              (this.rate_max = res.data.rate_max);
            this.rate_min = res.data.rate_min;
            this.rate_id = res.data.id;
          }
        });
    },
    // 比例确定
    rateSubmit() {
      if (
        this.non_standard_order_rate * 1 < this.rate_min * 1 ||
        this.non_standard_order_rate * 1 > this.rate_max * 1
      ) {
        this.$message.warning(
          "比例范围为" + this.rate_min + "-" + this.rate_max
        );
        return;
      }
      let params = {
        rate_id: this.rate_id,
        non_standard_order_rate: this.non_standard_order_rate,
        partner_type: "designer",
      };
      this.$http.post("/api/root/Base/setOrderRate", params).then((res) => {
        if (res.code == 1) {
          this.$message.success("保存成功");
          this.dialogVisible = false;
        } else {
          this.$message.warning(res.msg);
        }
      });
    },

    // 关闭弹出框后
    closedFn() {
      this.non_standard_order_rate = "";
      this.rate_max = "";
      this.rate_min = "";
      this.rate_id = "";
    },

    // 获取设计师列表
    getDesigList() {
      this.$http
        .post("/api/root/designer/index", {
          page: this.page,
          pagesize: this.pageSize,
          keyword:this.input,
          identity: 2,
          market_id:this.marketId
        })
        .then((res) => {
          console.log(res);
          if (res.code == 1) {
            this.tableList = res.data.list ? res.data.list : [];
            this.total = res.data.total;
          }
        });
    },

    //点击详情
    toDetail(id) {
      console.log(id);
      this.$router.push({ name: "designerDetail", query: { id } });
    },

    //新增设计师按钮
    handerNewShop() {
      this.$router.push({ path: "/newDesigner" });
    },

    // 类型
    handerChange() {},

    // 搜索
    handerSeach() {
      this.getDesigList();
    },

    // 禁用或启用
    shelves(id, status) {
      console.log(status);
      let sta = status == 1 ? 0 : 1;
      this.$http
        .post("/api/root/designer/changeStatus", { id, status: sta })
        .then((res) => {
          if (res.code == 1) {
            this.getDesigList();
            this.$message({
              type: "success",
              message: "操作成功",
            });
          }
        });
    },

    // 下架
    toDonw() {},

    // 多选
    handlerCheckbox(i) {
      console.log(i);
      let arr = this.checkBoxAll;
      if (arr.includes(i)) {
        let index = arr.indexOf(i);
        if (index != -1) {
          arr.splice(index, 1);
          this.shelvesAlls.splice(index, 1);
          if (this.checkBoxAll.length !== this.tableList.length) {
            this.checkAll = false;
          }
        }
      } else {
        this.checkBoxAll.push(i);
        this.shelvesAlls.push(this.tableList[i].id);
        if (this.checkBoxAll.length == this.tableList.length) {
          this.checkAll = true;
        }
      }
      console.log(this.shelvesAlls);
    },
    // 全选与全不选
    handerCheckAll() {
      this.checkAll = !this.checkAll;
      let arr = this.tableList.length;
      this.checkBoxAll = [];
      this.shelvesAlls = [];
      if (this.checkAll) {
        for (let i = 0; i < arr; i++) {
          this.checkBoxAll.push(i);
        }
        this.checkBoxAll.map((v) => {
          this.shelvesAlls.push(this.tableList[v].id.toString());
        });
      } else {
        this.checkBoxAll = [];
        this.shelvesAlls = [];
      }
      console.log(this.shelvesAlls);
    },

    // // 全选后的删除
    // selectDel(){
    // 	console.log(this.shelvesAlls);
    // 	let res =[...new Set(this.shelvesAlls)]; //去重
    // 	console.log(res);
    // 	let str = res.join(',');
    // 	if(this.shelvesAlls.length){
    // 		this.$confirm('此操作将删除选中项, 是否继续?', '提示', {
    // 			confirmButtonText: '确定',
    // 			cancelButtonText: '取消',
    // 			type: 'warning'
    // 		}).then(()=>{
    // 			this.$http.post('/api/root/designer/del',{id:str}).then(res=>{
    // 				console.log(res);
    // 				if(res.code==1){
    // 					this.getDesigList();
    // 					this.checkAll=false;
    // 					this.checkBoxAll=[];
    // 					this.shelvesAlls=[];
    // 					this.$message({
    // 						type:'success',
    // 						message:'删除成功'
    // 					})
    // 				}
    // 			})
    // 		})
    // 	}else{
    // 		this.$message({
    // 			type:'info',
    // 			message:'请选择要删除的项'
    // 		})
    // 	}
    // },

    handleSizeChange(val) {
      this.pageSize = val;
      this.getDesigList();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getDesigList();
    },
  },
};
</script>

<style lang="less" scoped>
@import "designerList.less";
</style>
